<template>
  <!--  -->
  <layout title="实名认证" background="#fff">
    <view class="realName">
      <view v-if="status === -1">
        <view class="result">
          <image :src="getImgSrc('/identity/img_wait@2x.png')" />
          <view class="tip">正在查询中....</view>
        </view>
      </view>
      <view v-if="status === 2">
        <view class="result">
          <image :src="getImgSrc('/identity/img_succeed@2x.png')" />
          <view class="tip">您已完成实名认证，请选择工作区域！</view>
        </view>
        <u-form
          class="form"
          labelPosition="left"
          :model="info"
          :rules="rules"
          ref="form1"
        >
          <u-form-item label="姓名" prop="name" borderBottom>
            <u-input
              placeholder="点击输入"
              disabled
              style="text-align: right"
              v-model="info.name"
              :border="false"
            />
          </u-form-item>
          <u-form-item label="证件号" prop="info.id" borderBottom>
            <u-input
              placeholder="点击输入"
              disabled
              style="text-align: right"
              v-model="info.id"
              :border="false"
            />
          </u-form-item>
          <u-form-item
            label="选择工作区域"
            prop="school"
            borderBottom
            right-icon="arrow-down"
          >
            <u-input
              class="school-select"
              v-model="info.schoolText"
              type="select"
              placeholder="请选择"
              @tap="show = true"
            />
            <!-- <u-select
              @confirm="actionSheetCallback"
              v-model="show"
              :list="actionSheetList"
            ></u-select> -->
						<u-popup
						  v-model="show"
						  mode="bottom"
						  @close="show = false"
						>
						  <view
						    style="width: 100vw; background: #ffffff; padding-top: 10rpx"
						    :style="'padding-bottom:' + vuex_phoneLayout.ipxbottom + 'px;'"
						  >
						    <view class="search" style="background: #ffffff">
						      <u-search
						        v-model="keywords"
						        @custom="search"
						        @search="search"
						      ></u-search>
						    </view>
						    <scroll-view scroll-y style="height: 40vh">
						      <view v-if="actionSheetList.length">
						        <view
						          class="select_item"
						          v-for="(item, index) in actionSheetList"
						          :key="index"
						          @tap="actionSheetSelect(item)"
						        >
						          <view class="select_item_text1">
						            <text>{{ item.label }}</text>
						          </view>
						        </view>
						      </view>
						    </scroll-view>
						  </view>
						</u-popup>
          </u-form-item>
        </u-form>
        <view class="sub-title"
          >所有猎人均为实名认证，请妥善保管好自己的账号</view
        >
        <view class="auth-btn" @tap="submit">提交申请</view>
        <u-checkbox-group active-color="#4E95FC" class="schema">
          <u-checkbox v-model="checked" shape="circle"
            >勾选即表示您同意
            <text class="schema-link" @tap="schema">《点我拿合作协议》</text>
            <!-- <br /><text class="schema-link">《点我拿跑腿员培训》</text> -->
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <view v-if="status === 3">
        <view class="result">
          <image :src="getImgSrc('/identity/img_wait@2x.png')" />
          <view class="tip">实名认证正在正在审核中</view>
        </view>
      </view>
      <view v-if="status === 4">
        <view class="result fail">
          <image :src="getImgSrc('/identity/img_fail@2x.png')" />
          <view class="tip">实名认证失败</view>
          <view class="auth-btn" @tap="refillIn">重新填写</view>
          <view class="plain-btn" @tap="triggerToCall(phone)">联系客服</view>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
import { call } from "@/common/location.js";
export default {
  data() {
    return {
      status: -1, // -1 初始化 0审核中 1通过 2拒绝
      checked: false,
      show: false,
      info: {
        name: "",
        id: "",
        schoolText: "",
        schoolValue: "",
      },
      actionSheetList: [],
			selectListData:'',
			keywords:'',
      rules: {
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        id: {
          type: "string",
          max: 1,
          required: true,
          message: "请输入身份证号",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad(option) {
    this.queryCurrentProcess();
  },
  onShow() {},
  watch: {},
  computed: {
    phone() {
      return this.vuex_client.appletCode;
    },
  },
  methods: {
		search(e) {
		  let data = [];
		  let list = [];
		  if (this.selectListData && this.selectListData != "") {
		    data = JSON.parse(this.selectListData);
		    if (e) {
		      data.map((item) => {
		        if (item.label.indexOf(e) != -1) {
		          list.push(item);
		        }
		      });
		    } else {
		      list = data;
		    }
		    this.actionSheetList = list;
		  }
		},
    triggerToCall(phone, message) {
      if (!phone) {
        uni.showToast({
          title: message || "未设置电话号码, 呼叫失败",
          icon: "none",
        });
        return;
      }
      call(phone);
    },
    async queryCurrentProcess() {
      this.status = -1;
			const data = await this.$u.api.queryRealNameProcess();
			const type = data.data.type;
			
      this.status = 2;
			this.actionSheetList = (data.data.schoolSelect || []).map((d) => ({
			  label: d.value,
			  value: d.key,
			}));
			this.selectListData = JSON.stringify(this.actionSheetList);
      switch (type) {
        case 1:
          uni.navigateTo({
            url: "/pages/sys/auth/identity",
          });
					
          break;
        case 2:
          this.status = type;
          this.info.name = data.data.name;
          this.info.id = data.data.card;
          this.actionSheetList = (data.data.schoolSelect || []).map((d) => ({
            label: d.value,
            value: d.key,
          }));
					this.selectListData = JSON.stringify(this.actionSheetList);
          break;
        case 3:
        case 4:
          this.status = type;
          this.actionSheetList = data.data.schoolSelect;
          break;
        case 5:
          // uni.redirectTo({
          //   url: "/pages/sys/auth/result",
          // });
          break;
      }
    },
		actionSheetSelect(item){
			this.info.schoolText = item.label;
			this.info.schoolValue = item.value;
			this.show = false
			this.keywords = ''
			this.selectListData = JSON.stringify(this.actionSheetList);
		},
    actionSheetCallback(item) {
      this.info.schoolText = item[0].label;
      this.info.schoolValue = item[0].value;
    },

    submit() {
      if (!this.checked) {
        uni.showToast({
          title: "请勾选点我拿和用户协议协议",
          icon: "none",
        });
        return;
      }
      if (!this.info.schoolValue) {
        uni.showToast({
          title: "请选择工作校区",
          icon: "none",
        });
        return;
      }
      this.$u.api
        .submitRealNameApply({
          schoolId: this.info.schoolValue,
        })
        .then((res) => {
          uni.showToast({
            title: "实名认证提交成功",
          });
          this.queryCurrentProcess();
          // uni.navigateTo({
          //   url: "/pages/sys/auth/result",
          // });
        });
    },
    schema() {
      uni.navigateTo({
        url: "/pages/sys/auth/schema",
      });
    },
    refillIn() {
      uni.navigateTo({
        url: "/pages/sys/auth/identity",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.realName {
  background-color: #fff;
  .form {
    padding: 0 30rpx;
    background-color: #fff;
    /deep/.u-form-item--left {
      width: 200rpx !important;
      flex-basis: 200rpx !important;
      .u-form-item--left__content__label {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4b4b4b;
        line-height: 36rpx;
      }
    }
    .u-input {
      text-align: right !important;
    }
    .u-form-item {
      padding: 16rpx 0;
    }
  }
  .sub-title {
    margin: 24rpx auto 81rpx;
    text-align: center;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #b5b5b5;
    line-height: 36rpx;
  }

  .auth-btn {
    margin: 0 auto 0;
    width: 690rpx;
    height: 96rpx;
    background: linear-gradient(90deg, #4aabf6, #4675f6);
    box-shadow: 0px 16rpx 30rpx 0px rgba(74, 169, 246, 0.2);
    border-radius: 47rpx;
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 96rpx;
  }

  .plain-btn {
    @extend .auth-btn;
    margin-top: 40rpx;
    background: #ffffff !important;
    border: 1px solid #4e95fc;
    color: #4e95fc;
    box-shadow: none;
  }

  .schema {
    padding-left: 30rpx;
    margin: 43rpx auto 76rpx;

    /deep/.u-checkbox__label {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 36rpx;
    }
    &-link {
      color: #4e95fc;
    }
  }
  .school-select /deep/.u-icon--right {
    display: none;
  }
  .result {
    padding: 145rpx 0 124rpx;
    text-align: center;
    image {
      width: 286rpx;
      height: 190rpx;
    }
    .tip {
      margin-top: 39rpx;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #282828;
      line-height: 36rpx;
    }
  }
  .fail .tip {
    margin-bottom: 84rpx;
  }
}
/deep/.u-select__header {
  background-color: #fff;
}
.search {
	padding: 20rpx;
}
.select_item {
	padding: 10rpx;
	border-bottom: 1rpx solid #ccc;
}
.select_item_text1 {
	text-align: center;
	font-size: 30rpx;
}
</style>
